<template>
  <div>
    <!--reactive对象类型-->
    用户：{{ user.name }} -- {{ user.age }} -- {{ user.address.city }} <br />
    <button @click="changeUser">切换用户</button>
    <br />
    <button @click="changeUserName">切换用户姓名</button>
    <br />
    <button @click="changeUserCity">切换用户city</button>
    <br />
    <button @click="changeUserAddress">切换用户地址</button>
    <br />
    <br />
  </div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'

const user = reactive({
  name: '张三',
  age: 18,
  address: {
    city: '北京',
  },
})

const changeUser = () => {
  Object.assign(user, {
    name: '李四',
    age: 20,
    address: {
      city: '上海',
    },
  })
}
const changeUserName = () => {
  user.name += '~'
}
const changeUserCity = () => {
  user.address.city += '~'
}
const changeUserAddress = () => {
  user.address = {
    city: '上海呀',
  }
}
// 监视reactive- 整个对象
// 虽然对象的引用地址没有变化：但是也可以监听到
// 监视reactive-对象：1.更改对象触发；2.改属性，也触发；
// 默认是deep监听的，且无法关闭deep
const stopWatch = watch(user, (newVal, oldVal) => {
  console.log('watch-reactive 对象类型 1 - deep：', newVal, oldVal)
})

</script>
<style scoped></style>
